<template>
  <view class="content">
    <view class="jjzy" v-if="detailObj1.detailObj.xingzhengxuke == '1'">
      <span class="jjzy-border-top">此件为行政审批事项</span><br>
      <span class="jjzy-border-button">请按规定时间办理！</span>
    </view>


    <view class="margin-left-xs" v-if="detailObj1.detailObj.isLimit == '1'" style="height: 140rpx">
        <view class="form-row form-border" style="width: 83%;">
          <view class="flex-two flex-block form-border-right">
            <view class="column-block column-right-bold text-red">
              <text style="font-size: 20rpx; font-weight: bolder">限时<br>办文</text>
            </view>
          </view>
          <view>
            <view class="form-border-right flex flex-direction justify-center" style="height: 69.5rpx;">
              <view class="margin">
                <text>计时起始：{{detailObj1.detailObj.startTime}}</text>
                <text class="margin-left-sm">办理时限：{{ banlishixian }}</text>
              </view>
            </view>
            <view class="form-border-right flex flex-direction justify-center" style="height:  70rpx;">
              <view class="margin">
                  <text>截至时限：{{detailObj1.detailObj.endlineTime}}</text>
                  <text class="margin-left-sm">{{yuqiOrdaoshu}}</text>
<!--                  <text v-if="false" class="yiyuqi margin-left-sm">逾期：2天</text>-->
              </view>
            </view>
          </view>
        </view>
    </view>

    <view class="title">
      {{detailObj1.detailObj.headTitle}}
    </view>
    <view class="form-border" style="box-sizing: border-box;">
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>文件标题</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{detailObj1.detailObj.title}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>来文单位</label>
        </view>
        <view class="flex-three flex-center form-border-right">
          <span>{{detailObj1.detailObj.fwDeptName}}</span>
        </view>
        <view class="flex-one flex-block form-border-right form-margin">
          <label>来文编号</label>
        </view>
        <view class="flex-four flex-center form-border-right">
          <span>{{detailObj1.detailObj.fwCode}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>收文编号</label>
        </view>
        <view class="flex-three flex-center form-border-right">
          <span>{{detailObj1.detailObj.swCode}}</span>
        </view>
        <view class="flex-one flex-block form-border-right">
          <label>收文时间</label>
        </view>
        <view class="flex-two flex-center form-border-right">
          <span style="font-size: 26rpx;">{{detailObj1.detailObj.swTime}}</span>
        </view>
        <view class="flex-one flex-block form-border-right">
          <label>紧急程度</label>
        </view>
        <view class="flex-one flex-center form-border-right">
          <span>{{this.dict.getDictNameByDictCode('swjjcd',detailObj1.detailObj.emergencyLevel)}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>收文类型</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{convertSwlx(detailObj1.detailObj.processType)}}</span>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>呈送领导</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{detailObj1.detailObj.praiseUserNames}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>主办部门</label>
        </view>
        <view class="flex-three flex-center form-border-right">
          <span>{{detailObj1.detailObj.directDeptNames}}</span>
        </view>
        <view class="flex-one flex-block form-border-right form-margin">
          <label>抄送部门</label>
        </view>
        <view class="flex-four flex-center form-border-right">
          <span>{{detailObj1.detailObj.coDeptNames.split(',').join('、') }}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>批示未分送</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{otherDetail.pswfs}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>传阅情况</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{otherDetail.cyqk}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>司局分办处室</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{fbDeptNameList}}</span>
        </view>
      </view>
      <view class="form-row" style="min-height: 160rpx;">
        <view class="flex-one flex-block form-border-right">
          <label>局领导批示</label>
        </view>
        <view class="flex-eight form-border-right">
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['jldps'] != undefined">
            <view v-for="item in detailObj1.opinion.jldps">
              <view style="padding: 10rpx;">{{item.opinion}}</view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row" style="min-height: 160rpx;">
        <view class="flex-one flex-block form-border-right">
          <label>办理部门意见</label>
        </view>
        <view class="flex-eight form-border-right">
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['banliReview'] != undefined">
            <view v-for="(item,index) in detailObj1.opinion.banliReview">
              <!--如果和上一项意见的部门相同，则隐藏部门-->
              <view class="opinion-left text-bold" v-if="!(index>0 && detailObj1.opinion.banliReview[index-1].parentDeptCode == item.parentDeptCode)">{{item.parentDeptName}}</view>
              <view style="padding: 10rpx;">{{item.opinion}}</view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>备注</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <span>{{detailObj1.detailObj.remark}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>正文</label>
        </view>
        <view class="flex-eight flex-center form-border-right">
          <template v-if="detailObj1.detailBody !=null">
            <view v-for="item in detailObj1.detailBody">
              <span>{{item.attachName}}</span>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one flex-block form-border-right">
          <label>附件</label>
        </view>
        <view class="flex-eight form-border-right">
          <template v-if="detailObj1.detailAttachment != undefined && detailObj1.detailAttachment.length > 0 ">
            <view v-for="item in detailObj1.detailAttachment">
              <span>{{item.attachName}}</span>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row" style="min-height: 50px;">
        <view class="flex-four form-border-right">
          <span>秘书处注办：</span>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['zbssReview'] != undefined">
            <view v-for="item in detailObj1.opinion.zbssReview">
              <view style="padding: 10rpx;">{{item.opinion}}</view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
        <view class="flex-five form-border-right">
          <span>综合司领导批示：</span>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['zhsldReview'] != undefined">
            <view v-for="item in detailObj1.opinion.zhsldReview">
              <view style="padding: 10rpx;">{{item.opinion}}</view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
export default {
  name: "compo-read",
  props: {
    detailObj1: {
      detailObj:Object,       // 公文基本信息
      detailBody:Object,      // 正文
      detailAttachment:Object,// 附件
      relation:Object,        // 附加公文[{"id":"1c0962f8839d46f792f84e5c89c96f14","title":"ppap","relateDocId":"4ec205b8334446f9b932d0fcb3896bc8","proInstId":"4ec205b8334446f9b932d0fcb3896bc8"},{"id":"2f4aa437ecba4c748bff911f03667147","title":"py","relateDocId":"86d30c881c494b468534685bb0746174","proInstId":"86d30c881c494b468534685bb0746174"}]
      opinion:Object,         // 意见
    },
    proInstId: {
      type: String,
      default: ''
    },
    otherDetail: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      prevDate: '',
      prevUser: '',
      banlishixian:'',//办理时限
      yuqiOrdaoshu:'',//逾期或倒数时间
    };
  },

  watch: {
    proInstId: {
      handler(nval, oval) {
        if (this.util.isNotEmpty(nval)) {
          // this.getPrevInfo(nval)
        }
      },
      immediate: true,
      deep: true
    },
    detailObj1: {
      handler(nVal, oVal) {
        if (this.util.isNotEmpty(nVal.detailObj)) {
          if (this.util.isNotEmpty(nVal.detailObj.startTime) && this.util.isNotEmpty(nVal.detailObj.endlineTime)) {
            this.getWorkDayInPeriod(nVal.detailObj.startTime,nVal.detailObj.endlineTime)
          }
        }
      },
      immediate: true,
      deep: true
    },
  },

  computed: {
    fbDeptNameList(){
      return this.otherDetail.fbDepts.map(item=>item.deptName).join('、')
    }

  },

  mounted() {

  },

  methods: {
    /**
     * 限时办文的办理时限、逾期、
     * @param startTime yyyy-MM-dd
     * @param endlineTime yyyy-MM-dd
     */
    getWorkDayInPeriod(startTime,endlineTime){
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/doc/sw/getWorkDayInPeriod`),
        method: 'get',
        params: {
          'systemKey': this.cache.get('userInfo').systemKey,
          'systemFlag': this.cache.get('userInfo').systemFlag,
          'startDate': startTime,
          'endDate': endlineTime
        }
      }).then(({data}) => {
        if (data.code == 200) {
          if(this.util.isNotEmpty(data.data)){
            this.banlishixian = data.data.length+"天"
          }else{
            this.banlishixian = ''
          }
        }
      })

      var date = new Date()
      var newstartTime = this.util.timeFormatYYYYMMDD(date)
      var newendlineTime = new Date(Date.parse(endlineTime))
      if (newendlineTime.getTime() < date.getTime()){//逾期
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/doc/sw/getWorkDayInPeriod`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'startDate': endlineTime,
            'endDate': newstartTime
          }
        }).then(({data}) => {
          if (data.code == 200) {
            if(this.util.isNotEmpty(data.data)){
              if(data.data.length == 0){
                this.yuqiOrdaoshu = "逾期："+data.data.length+"天"
              }else{
                this.yuqiOrdaoshu = "逾期："+data.data.length-1+"天"
              }
            }
          }
        })
      }else{//倒数
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/doc/sw/getWorkDayInPeriod`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'startDate': newstartTime,
            'endDate': endlineTime
          }
        }).then(({data}) => {
          if (data.code == 200) {
            if(this.util.isNotEmpty(data.data)){
              this.yuqiOrdaoshu = "倒数计时："+(data.data.length-1)+"天"
            }
          }
        })
      }
    },
    // 获取传送信息
    getPrevInfo(proInstId) {
      let _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/workflow/workflowController/getPreviouProTrack`),
        method: 'get',
        params: {
          'systemKey': _this.cache.get('userInfo').systemKey,
          'systemFlag': _this.cache.get('userInfo').systemFlag,
          'proInstId': proInstId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          _this.prevDate = data.data.createTime
          _this.prevUser = data.data.sendUserName
        }
      })
    },

    convertSwlx(value) {
      if (value == '1') {
        return '外部来文'
      }
      if (value == '0') {
        return '内部来文'
      }
    },


  }



}
</script>

<style scoped>
  .content {
    padding: 10rpx;
    word-break: break-all;
    font-size: 26rpx;
  }
  .tranInfo {
    display: flex;
    justify-content: flex-end;
    margin-right: 10rpx;
  }
  .tranInfo span {
    font-weight: 600;
  }
  .jjzy {
    margin: 30rpx 10rpx;
    color: #ed1c24 !important;

  }
  .jjzy-border-top {
    border-top: 1rpx solid #ed1c24;
    border-right: 1rpx solid #ed1c24;
    border-left: 1rpx solid #ed1c24;
    padding: 16rpx;

  }
  .jjzy-border-button {
    border-bottom: 1rpx solid #ed1c24;
    border-right: 1rpx solid #ed1c24;
    border-left: 1rpx solid #ed1c24;
    padding: 16rpx;
  }
  .title {
    display: flex;
    justify-content: center;
    color: #ed1c24;
    font-weight: 600;
    font-size: 36rpx;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    letter-spacing: 10rpx;
  }
  .form-border {
    border: 1rpx solid #E00418;
    border-bottom: none;
    border-right: none;
  }
  .form-border-right {
    border-bottom: 1rpx solid #E00418;
    border-right: 1rpx solid #E00418;
  }
  .form-margin {
    margin-left: 1rpx;
    margin-right: 1rpx;
  }
  .form-row {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  .form-row label {
    color: #ed1c24;
    padding: 10rpx;
    text-align: center;
  }
  .form-row span {
    color: #000000;
    padding: 10rpx;
    text-align: left;
  }
  .flex-block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
  .flex-one {
    flex: 1;
    position: relative;
  }

  .flex-two {
    flex: 2;
    position: relative;
  }

  .flex-three {
    flex: 3;
    position: relative;
  }

  .flex-four {
    flex: 4;
    position: relative;
  }

  .flex-five {
    flex: 5;
    position: relative;
  }

  .flex-six {
    flex: 6;
    position: relative;
  }

  .flex-seven {
    flex: 7;
    position: relative;
  }

  .flex-eight {
    flex: 8;
    position: relative;
  }

  .flex-nine {
    flex: 9;
    position: relative;
  }

  .flex-ten {
    flex: 10;
    position: relative;
  }
  .flex-eleven {
    flex: 11;
    position: relative;
  }
  .flex-twelve {
    flex: 12;
    position: relative;
  }
  .flex-block-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 10rpx 0;
    /* font-family: SimSun; */
  }
  .opinion span {
    /*font-weight: 600;
    color: #000000;*/
  }
</style>
